<template>
  <keep-alive>
    <div class="footer">
      <yd-tabbar>
        <div v-for="(item,index) in datas" :key="index">
          <yd-tabbar-item :title="item.title" :link="item.router"  :active="item.active">
            <yd-icon :name="item.icon" custom slot="icon" size="0.5rem"></yd-icon>
          </yd-tabbar-item>
        </div>
        <div class="footerCenter" @touchend="release()">
          <yd-icon name="cross" custom slot="icon" size="0.5rem"></yd-icon>
        </div>

      </yd-tabbar>
      <release :height="height"></release>
    </div>
  </keep-alive>

</template>

<script>
  import {TabBar,TabBarItem} from 'vue-ydui/dist/lib.rem/tabbar'
  import {Icons} from 'vue-ydui/dist/lib.rem/icons'
  import release from '@/components/release'
  export default {
    components:{
      'yd-tabbar':TabBar,
      'yd-tabbar-item':TabBarItem,
      'yd-icon':Icons,
      release
    },
    data(){
      return {
        datas:[
          {title:'聊聊',link:'#',icon:'chat',router:{path:'/chat'},active:true},
          {title:'看看',link:'#',icon:'information',router:{path:'/information'},active:false},
          {title:'',link:'#',icon:'',router:'#'},
          {title:'找找',link:'#',icon:'query',router:{path:'/query'},active:false},
          {title:'设置',link:'#',icon:'setUp',router:{path:'/setUp'},active:false},
        ],
        height:'',
        state:false
      }
    },
    methods:{
      release(){
        if(!this.state){
          this.height = "7rem";
          this.state = true
        }else {
          this.height = '0';
          this.state = false
        }
        this.$store.commit('release',this.height)
      }
    },
    props:['identity'],
    created(){
      for(var i=0 ; i<this.datas.length;i++){
        if(this.datas[i].icon == this.identity){
          this.datas[i].active = true
        }else {
          this.datas[i].active = false
        }
      }
    },
    deativated(){
      this.$store.commit('relesae','0')
      this.state = false
    }
  }

</script>

<style lang="less" scoped>
  @import '~less/base';
  .footer{
    width: 100%;
    height: 0.94rem;
    background: @footer-bg;
    z-index: 30;
    position: fixed;
    bottom: 0;
    border-top: 2px solid @footer-border;
    >footer{
      height: 100%;
      padding: 0 !important;
      color: @footer-ok !important;
      position: absolute;
      z-index: 30;
      >div{
        width: 25%;
        z-index: 55;
        letter-spacing: 3px;
      }
      .footerCenter{
        width: 1.2rem;
        height: 1.2rem;
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        border-radius: 50%;
        border: 1px solid @footer-centerBorder;
        background: @footer-centerBg;
        z-index: 56;
        top: -0.38rem;
        >i{
          display: inline-block;
          color:@footer-centerColor;
          margin-left: 50%;
          margin-top: 0.25rem;
          transform: translate(-50%);
        }
      }
    }
  }
</style>
